<template>
	<div id="app">
		<div class="header">
			<h1>标题</h1>
		</div>
		<div class="navbar">
			<router-link v-for="(item,index) in routerlist" :to="item.path" :key="index">
				<button class="routerbtn">
					{{ item.name }}
				</button>
			</router-link>
		</div>
		<div class="main">
			<router-view></router-view>
		</div>
	</div>
</template>


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
	import Vue from 'vue'
	import {
		routesList
	} from '@/router/index.js'

	export default {
		name: 'Router',
		components: {},
		data() {
			return {
				routerlist: []
			}
		},
		mounted() {
			this.getRouterList();
		},
		methods: {
			getRouterList() {
				this.routerlist = routesList;
				// console.log(this.routerlist);
			}
		}
	}
</script>

<style scoped>
	#app {
		/* flex-direction: column; */
		width: 100%;
		/* 默认字号 */
		/* font-size: 20px; */
	}

	/* 头部样式 */
	.header {
		position: absolute;
		text-align: center;
		font-family: '宋体';
		/* line-height: 10%; */
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 90%;
		background: -webkit-linear-gradient(left, #c2f0e1, #d6f5eb, #ebfaf5, #c2f0e1, #c2f0e1) no-repeat;
		overflow: hidden;
	}

	/* 左侧样式 */
	.navbar {
		position: absolute;
		flex-direction: column;
		width: 15%;
		top: 10%;
		left: 0px;
		bottom: 0px;
		overflow-y: auto;
		/* 当内容过多时y轴出现滚动条 */
		background-color: #c2f0e1;
	}

	/* 主区域 */
	.main {
		position: absolute;
		top: 10%;
		left: 15%;
		bottom: 0px;
		right: 0px;
		/* 距离右边0像素 */
		padding: 0px;
		overflow-y: auto;
		/* 当内容过多时y轴出现滚动条 */
		/* background-color: red; */
	}

/* 	.router-link-exact-active,
	.router-link-active {
		background: -webkit-linear-gradient(bottom, #5bd7ae, #84e1c3, #c2f0e1, #84e1c3, #5bd7ae) no-repeat;
	} */

	.routerbtn {
		height: 60px;
		width: 100%;
		font-size: 30px;
		font-family: '宋体';
		text-align: center;
		border: none;
		background: -webkit-linear-gradient(bottom, #c2f0e1, #d6f5eb, #ebfaf5, #d6f5eb, #c2f0e1) no-repeat;
	}

	.routerbtn:hover {
		background: -webkit-linear-gradient(bottom, #ebfaf5, #d6f5eb, #c2f0e1, #d6f5eb, #ebfaf5) no-repeat;
	}

	.routerbtn:active {
		background: -webkit-linear-gradient(bottom, #5bd7ae, #84e1c3, #c2f0e1, #84e1c3, #5bd7ae) no-repeat;
	}

	h1 {
		font-size: 36px;
		line-height: 40px;
	}

	h2 {
		font-size: 30px;
		line-height: 40px;
	}

	h3 {
		font-size: 24px;
		line-height: 40px;
	}

	h4 {
		font-size: 18px;
		line-height: 20px;
	}

	/* Won't be used here */

	h5 {
		font-size: 14px;
		line-height: 20px;
	}

	h6 {
		font-size: 12px;
		line-height: 20px;
	}
</style>
